<template>
	<view class="content">
		<view class="card" v-for="(item,index) in tabList" :key="index">
			<view class="item-contnet"
				style="display: flex;justify-content: space-between;margin: 10rpx 0;font-weight: bold;">
				<view class="content-left1">
					{{item.materialName}}
				</view>
				<view class="content-right">
					{{item.materialCode}}
				</view>
			</view>

			<view class="item-contnet" style="justify-content: space-between;">
				<view class="content-left">
					{{item.depotName}}
				</view>
				<view class="content-right">
					{{item.materialsku}}
				</view>
			</view>

			<view class="item-contnet">
				<view class="content-left">
					欠合作商数量
				</view>
				<view class="content-right">
					{{item.owedToQuantity}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					管理城市
				</view>
				<view class="content-right">
					{{item.operatyCity}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					已租总数
				</view>
				<view class="content-right">
					{{item.totalLeased}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					可用数量
				</view>
				<view class="content-right">
					{{item.availableQuanty}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					租赁申请中数量
				</view>
				<view class="content-right">
					{{item.appliceNum}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					退租申请中数量
				</view>
				<view class="content-right">
					{{item.appliceTermination}}
				</view>
			</view>
			<view class="item-contnet">
				<view class="content-left">
					买赔申请中数量
				</view>
				<view class="content-right">
					{{item.claimCompensation}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// props: {
	// isScroll: {
	// 	type: Boolean,
	// 	default: true
	// },
	// tabList: {
	// 	type: Array,
	// 	default: ''
	// }
	// tabIndex: {
	// 	type: Number,
	// 	default: 0
	// },
	// },
	export default {
		data() {
			return {
				tabList: [{
					materialName: '物资名称1',
					materialsku: '3000L/桶',
					depotName: '大兴1仓',
					materialCode: 'BM13334324324',
					totalLeased: 100, //已租总数
					availableQuanty: 90, //可用数量
					owedToQuantity: 10, //签合作商数量
					operatyCity: '北京A区',
					appliceNum: 20, //租赁申请中数量
					appliceTermination: 30, //退租申请中数量
					claimCompensation: 40, //买赔申请
				}, {
					materialName: '物资名称1',
					materialsku: '3000L/桶',
					depotName: '大兴1仓',
					materialCode: 'BM13334324324',
					totalLeased: 100, //已租总数
					availableQuanty: 90, //可用数量
					owedToQuantity: 10, //签合作商数量
					operatyCity: '北京A区',
					appliceNum: 20, //租赁申请中数量
					appliceTermination: 30, //退租申请中数量
					claimCompensation: 40, //买赔申请
				}, {
					materialName: '物资名称1',
					materialsku: '3000L/桶',
					depotName: '大兴1仓',
					materialCode: 'BM13334324324',
					totalLeased: 100, //已租总数
					availableQuanty: 90, //可用数量
					owedToQuantity: 10, //签合作商数量
					operatyCity: '北京A区',
					appliceNum: 20, //租赁申请中数量
					appliceTermination: 30, //退租申请中数量
					claimCompensation: 40, //买赔申请
				}, {
					materialName: '物资名称1',
					materialsku: '3000L/桶',
					depotName: '大兴1仓',
					materialCode: 'BM13334324324',
					totalLeased: 100, //已租总数
					availableQuanty: 90, //可用数量
					owedToQuantity: 10, //签合作商数量
					operatyCity: '北京A区',
					appliceNum: 20, //租赁申请中数量
					appliceTermination: 30, //退租申请中数量
					claimCompensation: 40, //买赔申请
				}]
			}
		},
		methods: {
			scrolltolowerFn() {
				console.log('1221')
			}
		}
	}
</script>

<style>
	.card {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 29rpx;
	}

	.item-contnet {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
		
		.content-left{
			color: #9c9c9c;
			/* margin-right: 20rpx; */
		}
	}
</style>